<template>
  <div class="box-shadow pare-box">
    <el-form
      :model="submitQuery"
      ref="submitQuery"
      :rules="submitRules"
      size="small"
      label-width="115px"
    >
      <!-- 语音广播 -->
      <div class="line">
        <div class="line-title">语音广播（机器人本体）</div>
      </div>
      <el-form-item
        label="启用:"
        prop="isVoiceBroadcast"
        style="margin-top: 15px"
        required
      >
        <el-switch
          v-model="submitQuery.isVoiceBroadcast"
          active-color="#00D1FF"
          inactive-color="#BFBFBF"
          active-value="1"
          inactive-value="0"
        >
        </el-switch>
      </el-form-item>
      <template v-if="submitQuery.isVoiceBroadcast == '1'">
        <el-form-item
          label="音频文件:"
          prop="fileName"
          style="margin-top: 15px"
          :rules="
            submitQuery.isVoiceBroadcast == '1' ? submitRules.voiceFile : []
          "
        >
          <AudioUpload
            class="upload-demo"
            :uploadFileUrl="audioUploadUrl"
            :fileListArr="voiceFile"
            :fileType="audioFileType"
            :showFileList="true"
            :limit="audioLimit"
            :isShowTip="false"
            :fileSize="1024"
            @input="audioUploadSuccess"
          >
          </AudioUpload>
          <div class="upload-limit">
            请上传大小不超过<span>10MB</span>，格式为<span>WAV</span>
            的文件
          </div>
          <!-- <div>
          <audio ref="audio" controls="" :src="musicPath" />
        </div> -->
        </el-form-item>
        <el-form-item
          label="播放时段:"
          prop="voiceTime"
          style="margin-top: 15px"
        >
          <el-time-picker
            v-model="submitQuery.voiceStartTime"
            format="HH:mm"
            value-format="HH:mm"
            placeholder="开始时间"
            style="width: 125px"
          >
          </el-time-picker>
          <span
            style="
              display: inline-block;
              width: 15px;
              color: #fff;
              margin-left: 10px;
            "
            >-</span
          >
          <el-time-picker
            v-model="submitQuery.voiceEndTime"
            format="HH:mm"
            value-format="HH:mm"
            placeholder="结束时间"
            style="width: 125px"
          >
          </el-time-picker>
        </el-form-item>
      </template>
      <!-- 液晶显示屏 -->
      <div class="line">
        <div class="line-title">液晶显示屏（T7-M）</div>
      </div>
      <div class="srystal">
        <el-form-item
          label="默认图片:"
          prop="defaultPicture"
          style="margin-top: 15px"
          required
        >
          <el-radio-group v-model="submitQuery.isDefaultPicture">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <div v-if="submitQuery.isDefaultPicture == '1'">
            <img
              :src="defaultPicUrl"
              style="diaplay: inline-block; width: 160px; height: 90px"
            />
          </div>
          <div v-else class="upload-default-img">
            <div class="upload-default-pic-btns">
              <AvatarUpload
                class="upload-demo"
                :fileListArr="defaultPicture"
                :fileType="defaultFile"
                :isShowTip="false"
                :showFileList="true"
                :fileSize="5"
                :limit="1"
                @input="defaultPicSuccess"
              >
              </AvatarUpload>
            </div>
            <div class="upload-limit" style="margin-left: 0">
              格式支持 <span>jpg</span>、<span>jpeg</span>、<span>png</span>
              不超过5M
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="发布配置:"
          prop="isBroadcast"
          style="margin-top: 15px"
          required
        >
          <el-switch
            v-model="submitQuery.isBroadcast"
            active-color="#00D1FF"
            inactive-color="#BFBFBF"
            active-value="1"
            inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <div v-if="submitQuery.isBroadcast == '1'" class="deep-bgc">
          <el-form-item
            label="显示内容:"
            prop="showType"
            style="margin-top: 15px"
            :rules="submitQuery.isBroadcast == '1' ? submitRules.showType : []"
            required
          >
            <el-radio-group v-model="submitQuery.showType">
              <el-radio :label="1">图片轮播</el-radio>
              <el-radio :label="2">文字轮播</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-if="submitQuery.showType == '1'"
            label="上传图片:"
            style="margin-top: 15px"
            :rules="
              submitQuery.isBroadcast == '1' && submitQuery.showType == '1'
                ? submitRules.imgList
                : []
            "
          >
            <FileUpload
              class="upload-demo"
              :fileListArr="imgList"
              :fileType="defaultFile"
              :isShowTip="true"
              :showFileList="true"
              :fileSize="5"
              :limit="imgListLimit"
              @input="showContentSuccess"
            >
            </FileUpload>
          </el-form-item>
          <el-form-item
            v-if="submitQuery.showType == '2'"
            label="文字内容:"
            prop="showTxt"
            style="margin-top: 15px"
            :rules="
              submitQuery.isBroadcast == '1' && submitQuery.showType == '2'
                ? submitRules.showTxt
                : []
            "
          >
            <el-input
              v-model="submitQuery.showTxt"
              :rows="4"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item
            v-if="submitQuery.showType == '1'"
            label="轮播频率:"
            prop="showSpeed"
            style="margin-top: 15px"
            :rules="submitQuery.isBroadcast == '1' ? submitRules.showSpeed : []"
            required
          >
            <el-input
              v-model="submitQuery.showSpeed"
              size="medium"
              style="width: 255px"
            ></el-input>
            <span class="shuf-time">秒/张</span>
          </el-form-item>
          <el-form-item
            v-if="submitQuery.showType == '2'"
            label="滚动速度:"
            prop="showSpeed"
            style="margin-top: 15px"
            :rules="submitQuery.isBroadcast == '1' ? submitRules.showSpeed : []"
          >
            <el-input
              v-model="submitQuery.showSpeed"
              size="medium"
              style="width: 255px"
            ></el-input>
            <span class="shuf-time">秒/行</span>
          </el-form-item>
          <el-form-item
            label="显示时段:"
            prop="showTime"
            style="margin-top: 15px"
          >
            <el-time-picker
              v-model="submitQuery.broadcastStartTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="开始时间"
              style="width: 125px"
            >
            </el-time-picker>
            <span
              style="
                display: inline-block;
                width: 15px;
                color: #fff;
                margin-left: 10px;
              "
              >-</span
            >
            <el-time-picker
              v-model="submitQuery.broadcastEndTime"
              format="HH:mm"
              value-format="HH:mm"
              placeholder="结束时间"
              style="width: 125px"
            >
            </el-time-picker>
          </el-form-item>
        </div>
        <div class="form-bottom">
          <div class="serch-btn" @click="submitConfig">保存</div>
          <div class="reset-btn" @click="cancleBtn">取消</div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { API_newsSetting, API_GetNewInfo } from "@/api/task/info";
import { mapGetters } from "vuex";
import AudioUpload from "@/components/AudioUpload";
import AvatarUpload from "@/components/AvatarUpload";
export default {
  components: {
    AudioUpload,
    AvatarUpload,
  },
  data() {
    return {
      audioUploadUrl: process.env.VUE_APP_BASE_API + "/news/upload/1", //部署前加个/
      defaultPicUrl: require("@/assets/images/task/default.png"), //默认图
      id: "", //区别是新增还是编辑
      submitQuery: {
        isVoiceBroadcast: "1", //是否语音播报
        voiceStartTime: "", //语音开始播报时间
        voiceEndTime: "", //语音播报结束时间
        isDefaultPicture: 1, //是否使用默认图
        isBroadcast: "1", //是否启用轮播
        showType: 1, //轮播类型
        showTxt: "", //轮播内容
        showSpeed: "", //轮播频率
        broadcastStartTime: "", //轮播开始时间
        broadcastEndTime: "", //轮播结束时间
      },
      voiceFile: [], //音频文件
      defaultPicture: [], //默认图
      imgList: [], //轮播图片
      audioFileType: ["wav"],
      audioLimit: 1,
      imgListLimit: 10,
      defaultFile: ["jpg", "jpeg", "png"], //默认图片类型
      submitRules: {
        //音频文件
        voiceFile: [
          {
            required: true,
            validator: (rules, value, cb) => {
              if (
                this.submitQuery.isVoiceBroadcast == "1" &&
                this.voiceFile.length == 0
              ) {
                return cb(new Error("音频文件不能为空!"));
              }
              return cb();
            },
            trigger: "change",
          },
        ],
        // 音频播放时间段
        voiceTime: [
          {
            required: true,
            validator: (rules, value, cb) => {
              if (
                this.submitQuery.isVoiceBroadcast == "1" &&
                (this.submitQuery.voiceStartTime == "" ||
                  this.submitQuery.voiceEndTime == "")
              ) {
                cb(new Error("请选择音频播放时间段!"));
              } else {
                cb();
              }
            },
            trigger: "change",
          },
        ],
        // 显示内容
        imgList: [
          {
            required: true,
            validator: (rules, value, cb) => {
              if (this.imgList.length == 0) {
                return cb(new Error("显示内容不能为空!"));
              }
              return cb();
            },
            trigger: "change",
          },
        ],
        showTxt: [
          { required: true, message: "请输入文字内容", trigger: "blur" },
        ],
        showSpeed: [
          { required: true, message: "请输入轮播频率", trigger: "blur" },
        ],
        showTime: [
          {
            required: true,
            validator: (rules, value, cb) => {
              if (
                this.submitQuery.broadcastStartTime == "" ||
                this.submitQuery.broadcastEndTime == ""
              ) {
                cb(new Error("请选择显示时段!"));
              } else {
                cb();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["globalRobotInfo"]),
  },
  created() {
    this.getNewInfo();
  },
  methods: {
    /**根据robotId查询信息 */
    getNewInfo() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      API_GetNewInfo(this.globalRobotInfo.robot.robotId)
        .then((res) => {
          if (res.code == 200) {
            if (!res.data) return;
            this.id = res.data.id;
            //赋值
            this.submitQuery = Object.assign({}, res.data);
            //语音播报
            this.voiceFile = [
              {
                name: res.data.voiceFile,
                path: res.data.voiceFile,
                // url: "http://10.16.94.1" + this.submitQuery.voiceFile,
                url:
                  window.location.protocol +
                  "//" +
                  window.location.host +
                  this.submitQuery.voiceFile,
              },
            ];
            // 语音启用
            this.submitQuery.isVoiceBroadcast = res.data.isVoiceBroadcast + "";
            // 发布配置启用
            this.submitQuery.isBroadcast = res.data.isBroadcast + "";
            // 处理默认图片
            this.defaultPicture = [
              {
                name: res.data.defaultPicture,
                path: res.data.defaultPicture,
                url:
                  window.location.protocol +
                  "//" +
                  window.location.host +
                  this.submitQuery.defaultPicture,
              },
            ];
            console.warn("this.defaultPicture", this.defaultPicture);
            //轮播图
            if (this.submitQuery.showType == "2") {
              this.$set(this.submitQuery, "showTxt", res.data.showContent);
            } else {
              let imgList = this.submitQuery.showContent.split(",");
              this.imgList = imgList.map((item) => {
                return {
                  name: item,
                  path: item,
                  url:
                    window.location.protocol +
                    "//" +
                    window.location.host +
                    item,
                };
              });
            }
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    /**音频 上传成功 */
    audioUploadSuccess(file) {
      if (file.length == 0) return;

      this.voiceFile = file;
    },
    /**默认图 上传成功 */
    defaultPicSuccess(file) {
      if (file.length == 0) return;
      this.defaultPicture = file;
      console.warn("this.defaultPicture", this.defaultPicture);
    },
    /**上传轮播图成功方法 */
    showContentSuccess(file) {
      if (file.length == 0) return;
      //回显
      if (Object.prototype.toString.call(file) == "[object String]") {
        this.imgList = file.split(",").map((item) => {
          return {
            path: item.slice(item.indexOf("opt") - 1, item.length),
            url: item,
            name: item.slice(item.indexOf("opt") - 1, item.length),
          };
        });
      } else {
        this.imgList = file;
      }
    },
    /**取消btn */
    cancleBtn() {},
    /**保存btn */
    submitConfig() {
      console.warn("");
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      //轮播图
      let imgList = [];
      if (this.imgList && this.imgList.length > 0) {
        imgList = this.imgList.map((item) => item.path);
        if (imgList.indexOf(",") == -1) {
          imgList = String(imgList);
        } else {
          imgList = imgList.join(",");
        }
      }
      //音频
      let params = {};
      if (this.id == "") {
        //新增
        params = {
          id: this.id,
          robotId: this.globalRobotInfo.robot.robotId,
          ...this.submitQuery,
          voiceFile: this.voiceFile.length == 0 ? "" : this.voiceFile[0].path, //音频文件
          defaultPicture:
            this.submitQuery.isDefaultPicture == "1"
              ? ""
              : this.defaultPicture[0].path, //默认图
          showContent:
            this.submitQuery.isBroadcast == "1"
              ? this.submitQuery.showType == "2"
                ? this.submitQuery.showTxt
                : imgList
              : "", //上传轮播图
        };
      } else {
        params = {
          id: this.id,
          robotId: this.globalRobotInfo.robot.robotId,
          ...this.submitQuery,
          voiceFile: this.voiceFile.length == 0 ? "" : this.voiceFile[0].path, //音频文件
          defaultPicture:
            this.submitQuery.isDefaultPicture == "1"
              ? ""
              : this.defaultPicture[0].path, //默认图
          showContent:
            this.submitQuery.isBroadcast == "1"
              ? this.submitQuery.showType == "2"
                ? this.submitQuery.showTxt
                : imgList
              : "", //上传轮播图
        };
      }
      API_newsSetting(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("操作成功");
          }
        })
        .finally(() => {
          loading.close();
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.pare-box {
  width: 100%;
  padding: 24px;
  padding-top: 0;
  box-sizing: border-box;
  overflow-y: auto;
}
.line {
  position: relative;
  height: 33px;
  margin-left: 190px;
  border-bottom: 1px dashed rgba(219, 255, 251, 0.2);
}
.line-title {
  position: absolute;
  left: -180px;
  bottom: -8px;
  font-size: 16px;
  font-family: SourceHanSansSC-Bold, SourceHanSansSC;
  font-weight: bold;
  color: #00d1ff;
  line-height: 16px;
}
// 语音广播
// .audio-content {
//   height: 241px;
// }
.upload-limit {
  font-size: 12px;
  font-family: SourceHanSansSC-Regular, SourceHanSansSC;
  font-weight: 400;
  color: #bfbfbf;
  line-height: 12px;
  margin-top: 5px;
  span {
    color: rgba(255, 173, 48, 1);
    font-weight: 400;
  }
}
//液晶显示屏
.srystal {
  height: 684px;
  padding-top: 20px;
  box-sizing: border-box;
}
.upload-default-img {
  img {
    position: relative;
    width: 160px;
    height: 90px;
    margin-bottom: 10px;
  }
  .fix-img {
    position: absolute;
    width: 160px;
    bottom: 22px;
    left: 0;
    text-align: center;
    font-family: SourceHanSansSC-Regular, SourceHanSansSC;
    font-weight: 400;
    color: #ffffff;
    background-color: rgba(38, 52, 66, 0.7);
  }
  .upload-default-pic-btns {
    width: 160px;
    height: 90px;
    flex-direction: column;
    div {
      width: 66px;
      height: 26px;
      line-height: 26px;
      font-size: 12px;
      margin-left: 8px;
      margin-bottom: 5px;
    }
  }
}
.img-list {
  display: flex;
  flex-wrap: wrap;
  div {
    width: calc(100% / 3 - 5px);
  }
  img {
    width: 160px;
    height: 90px;
    margin-right: 5px;
  }
}
::v-deep {
  .upload-btn {
    width: 66px;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
  }
}
.upload-shuf-img {
  display: flex;
  .serch-btn {
    margin-right: 10px;
  }
  div:nth-child(2) {
    height: 36px;
    line-height: 36px;
  }
}
.shuf-time {
  display: inline-block;
  color: #bfbfbf;
  margin-left: 10px;
}
.deep-bgc {
  width: 636px;
  min-height: 260px;
  padding: 5px 10px 10px 0;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.06);
}
.form-bottom {
  display: flex;
  div {
    margin-top: 24px;
    margin-left: 24px;
  }
}
::v-deep {
  .el-textarea__inner {
    width: 272px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: transparent;
  }
}
</style>
